<template>
    <div class="users_container">
        <div class="table_container">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                label="Avatar"
                width="90">
                <template slot-scope="scope">
                    <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
                </template>
                </el-table-column>
                <el-table-column
                label="name"
                width="180" property="name">
                </el-table-column>
                <el-table-column
                label="email"
                width="180" property=email>
                </el-table-column>
                <el-table-column
                label="Date"
                width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date | formateDate}}</span>
                </template>
                </el-table-column>
                <el-table-column label="edit">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    
                    <el-button
                    size="mini"
                    type="danger"
                    slot="reference"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button> 
                </template>
                </el-table-column>
            </el-table>
            <div class="btn_page">
                <el-button size="mini" @click="lastPage">上一页</el-button>
                <span class="currentPage" >第{{currentPage}}页</span>
                <el-button size="mini" @click="nextPage">下一页</el-button>
                <span class="pageCount" v-cloak>共{{pageCount}}页</span>
            </div>
        </div>
        <!-- 删除弹出框 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>确认删除该用户吗</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteUser">确 定</el-button>
        </span>
        </el-dialog>
    </div>
    
  
</template>

<script>
import {Message} from 'element-ui'
  export default {
    name:"DeleteUser",
    data() {
      return {
        currentPage:1,
        pageCount:10,
        tableData: [],
        dialogVisible:false,
        choosedIndex:0,
        choosedData:{},
      }
    },
    methods: {
      getTableData(page,callback){
          this.$axios.post('/api/users/getUsersByPage',{page:page})
          .then(res=>{
              this.tableData=res.data;
              callback()
          })
      },
      getPageCount(){
          this.$axios.post('/api/users/getUsersPageCount')
          .then(res=>{
              this.pageCount=res.data.data;
          })
      },
      lastPage(){
          if(this.currentPage<=1){
              Message.warning("已经是第一页了~~~");
          }
          else{
              this.getTableData(this.currentPage-1,()=>{
                  this.currentPage-=1;
              })
          }
      },
      nextPage(){
          if(this.currentPage>=this.pageCount){
              Message.warning("已经到最后一页了~~~");
          }
          else{
              this.getTableData(this.currentPage+1,()=>{
                  this.currentPage+=1;
              })
          }
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        this.choosedIndex=index;
        this.choosedData=row;
        this.dialogVisible=true;
      },
      deleteUser(){
        this.$axios.post("/api/users/deleteUser",{
            user:this.choosedData['_id'],
        })
        .then(res=>{
            if(res.data.data=="ok"){
                this.tableData.splice(this.choosedIndex,1);
                this.currentPage=1;
                this.getPageCount();
                Message.success("删除成功！");
            }
            else{
                Message.error("删除失败！")
            }
            this.dialogVisible=false;
        })
      }
    },
    created(){
        this.getPageCount();
        this.getTableData(this.currentPage);
    }
  }
</script>


<style scoped>
.users_container{
    width:100%;
    height:100%;
    box-sizing: border-box;
    padding:10px 10px;
    position: relative;
}
.table_container{
    width:100%;
    height:90%;
    overflow: hidden auto;
}
.btn_page{
    position: absolute;
    bottom:10px;
    left:50%;
    transform: translateX(-50%)
}
.btn_page button{
    margin:0 10px;
}
</style>